<template>
  <div class="loginWapper">
    <div class="container">
      <div class="content">
        <div class="contentTop">
          <div class="icon-box">
            <img src="../../assets/images/logo.png" alt="" />
          </div>
        </div>
        <div class="fieldBox">
          <van-cell-group :border="false">
            <van-field class="inputText mt15" v-model="userInfo.userName" clearable placeholder="请输入账号" >
              <template #left-icon>
                <img src="../../assets/images/usernameIcon.png" alt="" style="width: 17px; height: 16px;" />
              </template>
            </van-field>
            <van-field class="inputText password mt15" type="password" v-model="userInfo.password" clearable
              placeholder="请输入密码" left-icon="user-o">
              <template #left-icon>
                <img src="../../assets/images/passwordIcon.png" alt="" style="width: 13px; height: 16px;" />
              </template>
            </van-field>
            <div style="display: flex; align-items: center;" class="mt15">
              <van-field v-model="userInfo.code"  auto-complete="off" style="width: 50%" class="inputText">
                <!-- <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template> -->
                <template #left-icon>
                  <img src="../../assets/images/codeIcon.png" alt="" style="width: 15px; height: 16px;" />
                </template>
              </van-field>
              <div class="login-code">
                <img :src="codeUrl" class="login-code-img" />
              </div>
              <div class="login_tips" @click="getCode" > 看不清？</div>
            </div>
          </van-cell-group>
        </div>
        <div class="btnArea">
          <van-button type="primary" class="loginBtn" @click="onLogin()">登录 </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import { loginApi ,getCodeImg} from '@/api/api';
// import {  } from '@/api/api';

import { Toast } from 'vant';
export default {
  name: 'MyLogin',
  components: {  },
  data () {
    return {
      actions: [{ name: '返回主页' }],
      show: true,
      userInfo:{
        userName:'',
        password:'',
        code:'',
        uuid:''
      },
      userType:'',
      codeUrl:''
    }
  },
  mounted(){
    document.title='运中餐厅智慧食堂'
    localStorage.clear()
  },
  created () {
    sessionStorage.setItem('tabIndex', '')
    localStorage.clear()
    this.getCode()
  },

  methods: {
    changeRouterGo () {
      console.log('返回主页')
      // this.$router.push({ path: '/index' })
    },
    handleBackGo () {
      this.$router.go(-1)
    },
    onReasonClear () {
      if (this.paramsStatus.refuseReason === '' || this.paramsStatus.refuseReason === null) {
        this.show = true
      } else {
        this.show = false
      }
    },
    async getCode(){
      const res = await getCodeImg()
      const { data } = res
      this.codeUrl = 'data:image/gif;base64,' + data.img
      this.userInfo.uuid = data.uuid
    },

    onLogin(){
       const item={}
        item.isSubmit=false
        // this.getCode()
        // if(!this.userInfo.userName){
        //   Toast('请输入用户名')
        // }else if(!this.userInfo.password){
        //   Toast('请输入密码')
        // }else if(!this.userInfo.code){
        //   Toast('请输入验证码')
        // }
        const params={
          userName:this.userInfo.userName,
          password:this.userInfo.password,
          code:this.userInfo.code,
          uuid:this.userInfo.uuid
        }

        loginApi(params).then(res=>{
          console.log(res)
          if (res.code === 200) {
            localStorage.clear()
            const access_token = res.data.token
            localStorage.setItem('access_token', access_token)
            this.userType = res.data.currentType
            console.log(this.userType, this.userType == 'stall')
            localStorage.setItem('currentType', this.userType)
            let pathUrl = ''
            // let pathUrl = this.userType == 'staff' ? '/index' : (this.userType == 'logistics_in' ? '/library' : (this.userType == 'logistics_out' ? '/stockOutLibrary' : (this.userType == 'supplier' ? '/supplierLibrary' : '/login')))
            if (this.userType == 'stall') {
              console.log(111)
              pathUrl = '/index'
            } else if (this.userType == 'logistics_in') {
              pathUrl = '/library'
            } else if (this.userType == 'logistics_out') {
              pathUrl = '/stockOutLibrary'
            } else if (this.userType == 'supplier') {
              pathUrl = '/supplierLibrary'
            }
            console.log(pathUrl, 999)
            this.$router.push({
              // path:'/index',
              path: pathUrl,
              // path: this.userInfo.name.length ? (this.userInfo.password.length ? '/supplierLibrary' :'/library') : ( this.userInfo.password.length ? '/stockOutLibrary' :'/index'),
              query: { item: JSON.stringify(item) }
            })
          }else{
            Toast(res.message)
            this.getCode()
          }
        })
        // if (this.userInfo.name.length){
        //   if(this.userInfo.password.length){
        //     localStorage.setItem('lin' , 'supplier')
        //   }else{
        //     localStorage.setItem('lin', 'stockIn')
        //   }
        // }else{
        //   // 出库
        //   if(this.userInfo.password.length){
        //     localStorage.setItem('lin', 'stockOut')
        //   }else{
        //     localStorage.setItem('lin', 'true')
        //   }
        // }
    }
  }
}
</script>

<style lang="less" scoped>
.loginWapper{
  background: url(../../assets/images/loginBg.png) no-repeat;
  background-size: 100%;
  background-color: white;
}
.container {
  // background: url(../../assets/images/loginBg.png) no-repeat;
  background-size: 100%;
}
.content {
  // margin-top: 35px;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 2px);
  background: transparent;
}
.icon-box {
  margin-top: 55px;
  text-align: center;
  margin-bottom: 59px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
img {
  width: 72px;
  height: 72px;
  margin-top: 36px;
  margin-bottom: 11px;
}
.icon-box-text {
  // width: 64px;
  height: 22px;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: bold;
  color: #333333;
  // line-height: 22px;
}
.title1 {
  color: #333333;
}
.title2 {
  color: #666666;
}
.contentTop {
  // height:680px ;
  // margin-bottom: 332px;
}
.contentTest {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: absolute;
  // height: 300px;
  // background:white;
  // position: fixed;
  bottom: 20px;
  .text {
    width: 100%;
    // width: 252px;
    height: 40px;
    font-size: 14px;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #999999;
    // line-height: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.text div {
}
/deep/.van-cell-group .van-hairline--top-bottom {
  background: transparent;
}
/deep/.van-cell_tittle {
  background: palegoldenrod;
  font-size: 16px;
  color: palegreen;
}
/deep/.van-cell_value {
  width: 60%;
}
/deep/.van-cell--large {
  display: flex;
  justify-content: space-between;
}
/deep/.van-cell__title {
  flex: none;
}
.fieldBox{
  padding: 0px 30px;
  text-align: center;
  margin-top: 63px;

  .inputText{
      background: transparent;
      margin-left:0px;
      background: #F7F7F7;
      border-radius: 45px;
    }
    /deep/.van-cell{
      display: flex;
      align-items: center;
    }
    /deep/.van-field__control{
      font-size: 18px;
      text-align: left;
      color: #999999;
      line-height: 18px;
      padding-left: 16px;
    }
    /deep/.van-cell-group{
      background: transparent;
    }
    /deep/.van-field__left-icon {
      height: 16px;
      line-height: 16px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    img{
      margin: 0px;
    }
}
.password{
  margin-top: 74px;
}
.btnArea{
  padding: 0px 30px;
  margin-top: 108px;
}
.loginBtn {
  width: 100%;
  height: 45px;
  border: none;
  background: #047DCB;
  border-radius:45px;
  margin-bottom:20px;
}
[class*='van-hairline']::after {
  border: none;
}
.login-code{
  width: 30%;
  height: 36px;
  margin-left: 5px;
  img{
    width:100%;
    height: 36px;
  }
}
.login_tips{
  color:#047DCB;
  font-size: 12px;
  margin-left: 5px;
}

.mt15{
  margin-top: 15px;
}

</style>
